<template>
	<view class="LoginBox">
		<cu-custom bgColor="HomePageStyle">
			<block slot="content">登录</block>
		</cu-custom>
		<view class="login">
			<view class="AvatarArea">
				<view class="Avatar">
					<img src="https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/logo.jpg"
						style="width: 100%;height: 100%;" />
				</view>
				<view class="Title"> 姚记潮品订货商城 </view>
			</view>
			<view class="Form">
				<view class="Title"> 登录/注册会员，享专属优惠价! </view>
				<view class="wxlogin" @click="getUserProfile">
					<img :src="imgUrl + gameDetailsData.login.wxlogin" alt="" class="WxloginIcon" />
					<view class="text"> 微信登录 </view>
				</view>
				<view class="phonelogin" @click="zwkf"> 手机号登录/注册 </view>
			</view>
		</view>
		<view class="loginTck" v-if="phoneShow">
			<view class="tmbj"></view>
			<view class="data">
				<view class="title">手机号授权</view>
				<image class="img" :src="imgUrl + '/static/pttb/pt_ptcg.png'"></image>
				<view class="hint">申请获得以下权限:</view>
				<view class="hint1">
					<view class="list">
						<view class="yuan"></view>获得你的公开信息(手机号码)
					</view>
					<view class="list lista">绑定手机号码用于注册及登录小程序，无其他任何商业用途</view>
				</view>
				<view class="btn">
					<button class="btna" @click="loginCancela">取消</button>
					<button class="btnb" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
						确认
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import gameDetails from "@/static/lib/public.js";
	export default {
		data() {
			return {
				imgUrl: this.$http.imgUrl,

				gameDetailsData: gameDetails,
				phoneShow: false,
			};
		},

		methods: {
			// 登录
			getUserProfile(e) {
				let that = this;
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				const url = that.api.login.Wxlogin;
				let code = "";
				wx.login({
					success: (res) => {
						code = res.code;
					},
				});
				uni.getUserProfile({
					desc: "登录",
					success: async (res) => {
						const result = await that.$http.post(url, {
							code: code,
						});
						if (result.data.code == 444) {
							uni.hideLoading();
							this.phoneShow = true;
						}
						if (result.data.code == 200) {
							uni.hideLoading();
							const {
								data
							} = result.data;
							uni.setStorageSync("token", data.token);
							uni.navigateBack({});
						}
					},
					fail() {
						uni.hideLoading();
					},
				});
			},
			zwkf() {
				uni.showToast({
					title: "暂未开放",
					duration: 2000,
					icon: "none",
				});
			},

			// 绑定手机号
			async decryptPhoneNumber(e) {
				const loginres = {
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					jsCode: e.detail.code,
				};
				uni.showLoading({
					title: "加载中",
				});
				let that = this;
				this.phoneShow = false;
				const url = that.api.login.BindMobilePhoneNumber;
				wx.login({
					success: async (res) => {
						loginres.jsCode = res.code;
						if (e.detail.errMsg == "getPhoneNumber:ok") {
							const res = await this.$http.post(url, {
								...loginres,
							});
							console.log(res);
							uni.setStorageSync("token", res.data.data.token);
							uni.navigateBack({});
							uni.hideLoading();
						} else {
							uni.hideLoading();
						}
					},
				});

				// wx.login({
				// 	success: (res) => {
				// 		loginres.jsCode = res.code

				// 	}
				// })
			},
		},
	};
</script>

<style lang="scss" scoped>
	.LoginBox {
		.login {
			padding: 0rpx 18rpx 0rpx 20rpx;
			position: relative;
			background-color: #386af6;

			.AvatarArea {
				height: 342rpx;
				width: 100%;
				background-color: #386af6;
				padding: 16rpx 225rpx 0rpx 225rpx;

				.Avatar {
					width: 178rpx;
					height: 178rpx;
					background: #ffffff;
					opacity: 1;
					border-radius: 50%;
					margin-left: 28rpx;
					margin-bottom: 24rpx;
				}

				.Title {
					color: #FFFFFF;
					font-size: 32rpx;
				}
			}

			.Form {
				position: absolute;
				top: 85%;
				width: 712rpx;
				height: 404rpx;
				background: #ffffff;
				box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.08);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				padding: 52rpx 28rpx 60rpx 28rpx;

				.Title {
					width: 100%;
					text-align: center;
					margin-bottom: 48rpx;
				}

				.wxlogin {
					width: 656rpx;
					height: 86rpx;
					background: #07c160;
					border-radius: 44rpx 44rpx 44rpx 44rpx;
					opacity: 1;
					display: flex;
					align-items: center;
					color: #FFFFFF;
					justify-content: center;
					margin-bottom: 32rpx;

					.WxloginIcon {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.phonelogin {
					width: 656rpx;
					height: 86rpx;
					background: #f0f0f0;
					border-radius: 44rpx 44rpx 44rpx 44rpx;
					opacity: 1;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		// 绑定手机弹出框
		.loginTck {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;

			.tmbj {
				background-color: #000;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0.5;
				width: 100%;
				height: 100%;
			}

			.data {
				padding: 35rpx 0 29rpx;
				position: absolute;
				width: 651rpx;
				height: 511rpx;
				background-color: #FFFFFF;
				top: 50%;
				left: 50%;
				margin-top: -225.5rpx;
				margin-left: -325.5rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				position: relative;
				border-radius: 10rpx;

				.title {
					font-size: 30rpx;

					color: #000000;
				}

				.img {
					width: 94rpx;
					height: 94rpx;
					margin: 52rpx 0 27rpx;
				}

				.hint {
					font-size: 30rpx;

					color: #000000;
					margin-bottom: 14rpx;
				}

				.hint1 {
					.list {
						width: 342rpx;

						.yuan {
							width: 12rpx;
							height: 12rpx;
							border-radius: 50%;
							background-color: #a7a7a7;
							margin-right: 15rpx;
						}

						font-size: 25rpx;

						color: #adadab;
						display: flex;
						align-items: center;
					}

					.lista {
						font-size: 20rpx;
						margin-top: 16rpx;
						line-height: 32rpx;
						color: #d60909;
						text-align: center;
					}
				}

				.btn {
					display: flex;
					position: absolute;
					bottom: 0;
					width: 100%;

					button {
						width: 50%;
						text-align: center;
						padding: 29rpx 0;
						padding: 0;
						margin: 0;
						background-color: initial;
					}

					button::after {
						border: 0;
					}

					.btna {
						font-size: 30rpx;

						color: #adadab;
					}

					.btnb {
						font-size: 30rpx;

						color: #262626;
					}
				}
			}
		}
	}
</style>